<template>
  <a-form
    :form="form"
    :label-col="{ span: 5 }"
    :wrapper-col="{ span: 12 }"
    @submit="handleSubmit"
  >
    <a-spin :spinning="spinning">
      <a-alert
        v-show="issuccess"
        message="添加成功"
        type="success"
        show-icon
        close-text="Close Now"
      />
      <a-alert
        v-show="iserror"
        type="error"
        message="Error text"
        banner
        close-text="Close Now"
      />

      <a-form-item label="任务名称">
        <a-input
          v-decorator="[
            'ReminderName',
            {
              rules: [
                { required: true, message: 'Please input your 任务名称!' }
              ]
            }
          ]"
        />
      </a-form-item>

      <a-form-item label="任务周期(分钟)">
        <a-input
          v-decorator="[
            'PeriodOfMinutes',
            {
              rules: [
                {
                  required: true,
                  message: 'Please input your 任务周期!'
                },
                { validator: checkPrice }
              ]
            }
          ]"
        />
      </a-form-item>

      <a-form-item label="调用函数">
        <a-select
          v-decorator="[
            'ModuleName',
            {
              rules: [{ required: true, message: '请选择调用的函数!' }]
            }
          ]"
          placeholder="请选择调用的函数"
          @change="handleSelectChange"
        >
          <a-select-option v-for="item in selectOptions" :key="item">{{
            item
          }}</a-select-option>
          <!-- <a-select-option
            v-for="i in 25"
            :key="'./CloudFunctions/folder1/folder2/fun' + i"
            >OrderCancel - {{ i }}</a-select-option
          > -->
        </a-select>
      </a-form-item>

      <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
        <a-button type="primary" html-type="submit">Submit</a-button>
      </a-form-item>
    </a-spin>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      formLayout: "horizontal",

      spinning: false,
      issuccess: false,
      iserror: false,

      selectOptions: [],
      selected: "",

      form: this.$form.createForm(this, { name: "coordinated" })
    };
  },
  created: function() {
    this.$cloud
      .getFunctions({
        rows: 999,
        page: 1,
        sidx: "id",
        sord: "asc"
      })
      .then(res => {
        if (res) {
          for (let index = 0; index < res.length; index++) {
            const element = res[index];
            if (["AppSetting", "Global"].indexOf(element.modulePath) > -1) {
              continue;
            }
            this.selectOptions.push(element.modulePath);
          }
          console.log(this.selectOptions);
        } else {
          this.$message.error("获取函数列表失败");
        }
      });
  },
  methods: {
    checkPrice(rule, value, callback) {
      if (value > 0) {
        callback();
        return;
      }
      callback("任务周期必须大于等于1分钟!");
    },

    handleSubmit(e) {
      e.preventDefault();
      var that = this;
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log("Received values of form: ", values);

          values.ModuleName = this.selected;
          console.log(values);
          that.spinning = true;
          that.$cloud
            .command("iTool Reminder Register", values)
            .then(res => {
              console.log(res);
              if (res - 0 == 0) {
                that.$message.error("该函数已被计划任务引用，不可以重复添加。");
                that.spinning = false;
                that.iserror = true;
                return;
              }

              if (res - 0 == 2) {
                that.$message.error("该计划任务名称已存在，不可以重复添加。");
                that.spinning = false;
                that.iserror = true;
                return;
              }

              that.spinning = false;
              that.issuccess = true;
            })
            .catch(error => {
              console.log(error);
              that.spinning = false;
              that.iserror = true;
            });
        }
      });
    },

    handleSelectChange(value) {
      console.log(value);
      this.selected = value;
    }
  }
};
</script>
<style scoped>
.ant-alert {
  width: 50%;
  margin-bottom: 20px;
  margin-left: 20.83333333%;
}
</style>
